<template>
  <div>
    <con-title :info="topTitle"></con-title>
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs_search">
      <el-tab-pane label="所有设备" name="all"></el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
    </el-tabs>
    <el-form ref="form" :model="query" label-width="80px">
      <el-form-item label="在线状态">
        <el-select v-model="query.online" placeholder="请选择">
          <el-option label="全部" value="all"> </el-option>
          <el-option label="在线" :value="true"> </el-option>
          <el-option label="离线" :value="false"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="EUI">
        <el-input v-model="query.eui"></el-input>
      </el-form-item>
      <el-form-item>
        <el-form-item label="绑定时间">
          <el-date-picker
      v-model="query.date"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="gatewayList" style="width: 100%">
      <el-table-column prop="eui" label="EUI"> </el-table-column>
      <el-table-column prop="name" label="设备名称"> </el-table-column>
      <el-table-column prop="mhz" label="频率"> </el-table-column>
      <el-table-column prop="online" label="在线状态">
        <template slot-scope="scope">
          {{ scope.row.online | onlineType }}
        </template>
      </el-table-column>
      <el-table-column prop="country" label="国家"> </el-table-column>
      <el-table-column prop="agreement" label="组网协议类型"> </el-table-column>
      <el-table-column prop="uTime" label="绑定时间">
        <template slot-scope="scope">
          {{ scope.row.uTime | gettime }}
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currpage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $gatewayList } from "@/api/index.js";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "gateway",
  data() {
    return {
      topTitle: {
        type: "设备",
        text: "网关",
        msg: "展示EUI、名称、状态等设备信息,可根据EUI、状态、和绑定时间等条件筛选具体的网关。",
      },
      gatewayList: [],
      activeName: "all",
      query: {
        currPage: 1,
        pageSize: 5,
        eui: "",
        online: "",
        agreement: "",
        date: [],
      },
      total: 0,
    };
  },
  methods: {
    handleClick(value) {
      console.log(value);
      this.query.agreement = value.name
      this.getgatewayList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.query.currPage = 1;
      this.getgatewayList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.currPage = val;
      this.getgatewayList();
    },
    getgatewayList() {
      console.log("query",this.query);
      console.log("datestr",this.dateStr);
      var queryStr = {...this.query}
      if(this.dateStr != ''){
        queryStr.date = this.dateStr
      }
      $gatewayList(queryStr).then((res) => {
        console.log(res);
        this.gatewayList = res.data.data;
        this.total = res.data.total;
      });
    },
    onSubmit() {
      console.log("submit!");
      this.getgatewayList();
    },
  },
  components: {
    ConTitle,
  },
  filters: {
    onlineType(value) {
      return value ? "在线" : "离线";
    },
    gettime(value) {
      var date = new Date(+value);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      // var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      // var min =
      //   date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      // var seconds =
      //   date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return (
        year + "-" + month + "-" + day
      );
    },
  },
  computed:{
    dateStr(){
      let d1 = this.query.date[0];
      let d2 =this.query.date[1];
      let time1 = d1&&d1.getTime();
      let time2 = d2 &&d2.getTime();
      if(time1 && time2 ){
        return time1 + '-' + time2;
      }else{
        return "";
      }
    },
  },
  created() {
    this.getgatewayList();
  },
};
</script>

<style scoped lang="scss">
.tabs_search {
  margin-bottom: 10px;
}
</style>